<template>
	<view>
		<cu-custom class="text-Black" bgColor="bg-red" :isBack="true"><block slot="backText"></block>
			<block slot="content">业绩排名</block>
		</cu-custom>
		<view class="space-between bg-white">
			<scroll-view scroll-x class="bg-white nav solid-bottom">
				<view class="flex text-center">
					<view class="cu-item flex-sub " :class="index==TabCur?'cur text-'+theme:''" v-for="(item,index) in tabs" :key="index"
					 @tap="tabSelect" :data-id="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view style="min-width: 180rpx;" class="flex justify-end align-center">
				<image class="iconp" src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/gsc/icon-select.png"
				 mode="aspectFill"></image>
				<text class="margin-right">
					<picker mode="date" :value="start" :start="'2020-05-10'" :end="'2200-10-10'" fields='month' @change="bindDateChange">
						<view class="uni-input">{{start?start:'筛选'}}</view>
					</picker>
				</text>
			</view>
		</view>

		<view class="bg-white radius-t margin">
			<view class="grid col-4 text-center padding-tb-sm" :class="'bg-'+theme">
				<view class="">排名</view>
				<view class="">ID</view>
				<view class="">姓名</view>
				<view class="">业绩</view>
			</view>
			<view class="" v-for="(tab,index) in tabs" :key="index" v-if="index == TabCur">
				<view class="grid col-4 text-center  item align-center flex" v-for="(item,i) in tab.list" :key="i">
					<view class="">
						<block v-if="i<3">
							<image class="iconp2" mode="aspectFill" :src="'https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/static/gsc/icon-rank'+(i+1)+'.png'"></image>
						</block>
						<block v-else>
							{{item.rank}}
						</block>
					</view>
					<view class="">{{item.member_id}}</view>
					<view class="">{{item.member.realname|hiddenN(1,1)}}</view>
					<view class="">{{item.achievement}}</view>
				</view>
				<view class="cu-load margin-center" :class="tab.loading?'loading':'over'"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cubar from '@/components/default/Cubar.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			Cubar
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		filters: {
			hiddenN: function(str, frontLen, endLen) {
				var len = str.length - frontLen - endLen;
				if (len <= 0) len = 1
				var xing = '';
				for (var i = 0; i < len; i++) {
					xing += '*';
				}
				return str.substring(0, frontLen) + xing + (str.length - frontLen > endLen ? str.substring(str.length - endLen) :
					'');
			},

		},
		data() {
			return {
				statistics: null,
				TabCur: 0,
				member: null,
				start: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				tabs: [{
					name: "分公司",
					level: 5,
					list: [],
					loading: false
				}, {
					name: "董事",
					level: 4,
					list: [],
					loading: false
				}, {
					name: "CEO",
					level: 3,
					list: [],
					loading: false
				}, {
					name: "代理",
					level: 2,
					list: [],
					loading: false
				}],
			}
		},
		onLoad() {
			if (this.$common.loginAuth(true)) {
				this.getList(this.TabCur)
			}
		},
		onShow() {
			this.$common.loginAuth(true)
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
					this.getList(this.TabCur)
				}
			},
			getInfo() {
				this.$http
					.get('appointment_rank', {})
					.then((response) => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
						this.getList(this.TabCur)
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList(index) {
				let obj = this.tabs[index]
				if (!obj.loading) {
					this.tabs[index].loading = true
					this.$http
						.get('appointment_rank', {
							page: obj.page,
							level: obj.level,
							start: this.start
						})
						.then((response) => {
							this.tabs[index].list = response.data.data
							this.tabs[index].loading = false
						})
						.catch((response) => {
							console.log(response)
							this.tabs[index].loading = false
						})
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			bindDateChange: function(e) {
				if (this.start != e.target.value) {
					this.start = e.target.value
					this.tabs[0].list = []
					this.tabs[1].list = []
					this.tabs[2].list = []

					this.getList(this.TabCur)
				}
			},
		},
		onReachBottom() {},
		onPullDownRefresh() {
			this.tabs[this.TabCur].list = []
			this.tabs[this.TabCur].loading = false
			this.getInfo()
		},
	}
</script>

<style>
	.iconp {
		width: 26rpx;
		height: 26rpx;
	}

	.radius-t {
		border-radius: 14rpx 14rpx 0 0;
		overflow: hidden;
	}

	.bg-orange {
		background-color: #FF9900;
	}

	.item {
		border-bottom: 1px solid #F2F2F2;
		height: 100rpx;
		display: flex;
	}

	.iconp2 {
		width: 60rpx;
		height: 60rpx;
	}
</style>
